<template>
  <page-header-wrapper :title="false">
    <a-card :bordered="false" :style="{margin:'0 -24px',padding:0}">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="模块">
                <a-input :allowClear="true" v-model="queryParam.zh_controller" placeholder="请输入模块" />
              </a-form-item>
            </a-col>
            <a-col :md="18" :sm="24">
              <a-form-item label="日期">
                <a-range-picker show-time @change="changeTime">
                  <template slot="renderExtraFooter">
                    extra footer
                  </template>
                </a-range-picker>
              </a-form-item>
            </a-col>
            <a-col :md="23" :sm="24">
              <span class="table-page-search-submitButtons" style="float: right;">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="emptyFormData">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table
        ref="table"
        size="default"
        rowKey="log_id"
        :columns="columns"
        :data="loadData"
        showPagination="auto">
        <span slot="created_at" slot-scope="text, record">
          <template>
            {{ record.created_at | setTime }}
          </template>
        </span>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import {
    STable
  } from '@/components'
  import {
    lists
  } from '@/api/log'
  const columns = [{
      title: '模块',
      dataIndex: 'zh_controller',
      align: 'center'
    },
    {
      title: '描述',
      dataIndex: 'zh_action',
      align: 'center'
    },
    {
      title: '管理员',
      dataIndex: 'user_name',
      align: 'center'
    },
    {
      title: '操作时间',
      scopedSlots: {
        customRender: 'created_at'
      }
    }
  ]

  export default {
    components: {
      STable
    },
    data () {
      this.columns = columns
      return {
        // 查询参数
        queryParam: {
          zh_controller: '',
          start_time: '',
          end_time: '',
          page: 1,
          per_page: 10
        },
        yearPickShow: false,
        // 加载数据方法 必须为 Promise 对象
        loadData: async parameter => {
          const params = {
            page: parameter.pageNo,
            per_page: parameter.pageSize,
            start_time: this.queryParam.start_time,
            end_time: this.queryParam.end_time,
            zh_controller: this.queryParam.zh_controller
          }
          const res = await lists(params)
          const result = {
            pageNo: res.current_page,
            totalPage: res.last_page,
            data: res.data,
            pageSize: 10,
            totalCount: res.total
          }
          return Promise.resolve(result)
        }
      }
    },
    computed: {},
    filters: {
      setTime (ev) {
        const date = new Date(ev)
        // 转换日期
        const y = date.getFullYear()
        let m = date.getMonth() + 1
        m = m < 10 ? ('0' + m) : m
        let d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        let h = date.getHours()
        h = h < 10 ? ('0' + h) : h
        let M = date.getMinutes()
        M = M < 10 ? ('0' + M) : M
        let s = date.getSeconds()
        s = s < 10 ? ('0' + s) : s
        return y + '-' + m + '-' + d + ' ' + h + ':' + M + ':' + s
      }
    },
    created () {},
    methods: {
      setTimes (date) {
        // 转换日期
        const y = date.getFullYear()
        let m = date.getMonth() + 1
        m = m < 10 ? ('0' + m) : m
        let d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        let h = date.getHours()
        h = h < 10 ? ('0' + h) : h
        let M = date.getMinutes()
        M = M < 10 ? ('0' + M) : M
        let s = date.getSeconds()
        s = s < 10 ? ('0' + s) : s
        return y + '-' + m + '-' + d + ' ' + h + ':' + M + ':' + s
      },
      changeTime (ev) {
        // 日期框选择日期
        if (ev.length > 0) {
          this.queryParam.start_time = this.setTimes(ev[0]['_d'])
          this.queryParam.end_time = this.setTimes(ev[1]['_d'])
        } else {
          this.queryParam.start_time = ''
          this.queryParam.end_time = ''
        }
      },
      emptyFormData () {
        // 重置搜索参数
        this.queryParam = {
          zh_controller: '',
          start_time: '',
          end_time: '',
          page: 1,
          per_page: 20
        }
        // document.getElementsByClassName('anticon anticon-close-circle ant-calendar-picker-clear')[0].click()
        this.$refs.table.refresh(true)
      }
    }
  }
</script>
